<!-- ArticleHeader.vue -->
<template>
    <div class="card-header">
        <el-image :src="imgUrl + articleImg" fit="cover" class="article-banner"
            :preview-src-list="[imgUrl + articleImg]" loading="lazy">
            <template #error>
                <div class="image-error">
                    <el-icon>
                        <Picture />
                    </el-icon>
                    <span>加载失败</span>
                </div>
            </template>
        </el-image>

        <div class="header">
            <!-- Category Tag -->
            <el-tag class="category-tag" effect="light">
                {{ categoryName }}
            </el-tag>

            <h1>{{ articleTitle }}</h1>

            <el-row :gutter="40" class="article-meta">
                <el-col :span="12">
                    <div class="meta-item">
                        <el-icon>
                            <Timer />
                        </el-icon>
                        <span>{{ $filters.timeFilter(createTime) }}</span>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="meta-item">
                        <el-icon>
                            <View />
                        </el-icon>
                        <span>{{ viewCount }}</span>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup>
import { Picture, Timer, View } from '@element-plus/icons-vue';

defineProps({
    articleTitle: String,
    articleImg: String,
    categoryName: String,
    createTime: [String, Number],
    viewCount: [String, Number]
});

const imgUrl = import.meta.env.VITE_API_BASE_URL;
</script>

<style lang="scss" scoped>
.card-header {
    position: relative;
}

.article-banner {
    width: 100%;
    max-height: 280px;
    object-fit: cover;
}

.header {
    position: absolute;
    z-index: 2;
    background-color: rgba(80, 80, 80, 0.3);
    width: 100%;
    height: 100%;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    h1 {
        color: aliceblue;
        margin: 0;
        padding: 0 20px;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    }
}

.category-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 14px;
    background: rgba(144, 238, 144, 0.4);
    border: none;
    color: #2c3e50;
    border-radius: 8px 8px 8px 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    z-index: 1;
    backdrop-filter: blur(2px);
}

.article-meta {
    position: absolute;
    bottom: 10px;
    width: 100%;
    padding: 0 20px;
    color: aliceblue;
}

.meta-item {
    display: flex;
    align-items: center;

    .el-icon {
        margin-right: 8px;
        font-size: 18px;
    }

    span {
        font-size: 14px;
    }
}

.image-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 280px;
    background-color: #f5f7fa;
    color: #909399;

    .el-icon {
        font-size: 48px;
        margin-bottom: 10px;
    }
}
</style>